import React from 'react'
import { Modal } from 'antd'
import './index.scss' // 引入自定义样式文件
import { fileInfo } from '~/types'

interface PreviewModalProps {
  file: fileInfo | null
  isOpen: boolean
  onClose: () => void
}

const PreviewModal: React.FC<PreviewModalProps> = ({
  file,
  isOpen,
  onClose
}) => {
  if (!file) {
    return null
  }
  const renderPreview = () => {
    switch (file.fileType) {
      case 'video':
        return <video controls src={file.url} className='preview-content' />
      case 'audio':
        return <audio controls src={file.url} className='preview-content' />
      case 'image':
        return <img src={file.url} alt='Preview' className='preview-content' />
      case 'document':
        return renderDocumentPreview()
      default:
        return <p>暂不支持该文件格式</p>
    }
  }

  const renderDocumentPreview = () => {
    // 这里可以根据实际情况来渲染文档预览，例如使用 Google Docs Viewer 或 Office 365
    const officeOnlineViewerUrl = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(
      file.url
    )}`
    return (
      <iframe
        src={officeOnlineViewerUrl}
        className='preview-iframe'
        title='Document Preview'
      />
    )
  }

  return (
    <Modal
      title='文件预览'
      open={isOpen}
      onCancel={onClose}
      footer={null} // 不显示默认的底部按钮
    >
      <div>{renderPreview()}</div>
    </Modal>
  )
}

export default PreviewModal
